﻿@model Property4U.Models.Address

@{
    ViewBag.Title = "Edit";
}

<div class="row">
    <!-- Page Header -->
    <div class="col-lg-12">
        <h1 class="page-header">@ViewBag.Title</h1>
    </div>
    <!--End Page Header -->
</div>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Address</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.ID)

        <div class="container">
            <div id="map_canvas" style="width:100%; height:300px; margin-bottom:30px;" class="col-md-10"></div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Number, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Number, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Number, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Floor, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Floor, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Floor, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AreaName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.AreaName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.AreaName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Block, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Block, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Block, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Street, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Street, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Street, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.State, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Country, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Country, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.PostalCode, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.PostalCode, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PostalCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ZipCode, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ZipCode, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ZipCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Latitude, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Latitude, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                @Html.ValidationMessageFor(model => model.Latitude, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Longitude, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Longitude, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
                @Html.ValidationMessageFor(model => model.Longitude, "", new { @class = "text-danger" })
            </div>
        </div>

        @Html.HiddenFor(model => model.LastEdit, htmlAttributes: new { @Value = ViewBag.LastEdit } )

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section scripts{
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        initialize();

        jQuery('input').change('input propertychange paste', function () {
            var geocoder = new google.maps.Geocoder();
            var address = $("#Number").val() + ", , " + $("#Street").val() + ", , " + $("#City").val() + ", " + $("#State").val() + ", " + $("#ZipCode").val() + ", " + $("#Country").val();

            geocoder.geocode({ 'address': address }, function (results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    $("#Latitude").val(latitude);
                    $("#Longitude").val(longitude);
                }
            });
        });

    });
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng('@Model.Latitude', '@Model.Longitude'),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
        // create a marker
        var propertyLat = $("#Latitude").val();
        var propertyLong = $("#Longitude").val();
        var latlng = new google.maps.LatLng(propertyLat, propertyLong);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: 'Property Address'
        });

        //var infowindow = new google.maps.InfoWindow();
        //var service = new google.maps.places.PlacesService(map);

        //service.getDetails(request, function (place, status) {
        //    if (status == google.maps.places.PlacesServiceStatus.OK) {
        //        var marker = new google.maps.Marker({
        //            map: map,
        //            position: place.geometry.location
        //        });
        //        google.maps.event.addListener(marker, 'click', function () {
        //            infowindow.setContent(place.name);
        //            infowindow.open(map, this);
        //        });
        //    }
        //});

        google.maps.event.addListener(map, 'click', function (event) {
            alert("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng());
            map.setCenter(marker.getPosition());
        });

    }
    </script>  
}